<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Toki Learning</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery.newsticker.js"></script>
<script type="text/javascript">
var USERNAME='rbj';
var PASSWORD='rbj';

function clearText(id){
	document.getElementById(id).value="";

}

function validate(){
	if(document.getElementById('input_username').value == USERNAME && document.getElementById('input_password').value == PASSWORD){
		window.location = 'contest.html';
	} else {
		alert('Pasangan Nama Pengguna dengan Sandi tersebut tidak ditemukan');
	}
}

$(document).ready(
	function()
	{
		$("#news").newsTicker();
	}
);
</script>

<body>
	<div id="bg_header">
		<div id="header">
			<div id="logo_header">
				<img src="images/logo_header.png" />
			</div>
			<div id="nav_main">
				<ul>
					<li><a href="#">EKSPLORE</a></li>
					<li><a href="#">SOAL</a></li>
					<li><a href="#">DIKSUSI</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="bg_content">
		<div id="greetings">
			<div id="welcome_pic">
				<img src="images/monster.gif" width="200" height="200" />
			</div>
			<div id="welcome_text">
				<ul id="news">
					<li>
						<h1>Selamat Datang</h1>
						Selamat datang di situs TOKI Learning Center. Di situs ini kamu bisa belajar dan berlatih mengerjakan soal-soal pemrograman.
						Soal-soal yang ada di situs ini dikumpulkan dari kegiatan-kegiatan yang dilaksanakan oleh Tim Olimpiade Komputer Indonesia.
					</li>
					<li>
						<h1>Pelatihan Jarak Jauh Pra-OSN 2011</h1>
						Selamat datang para peserta Olimpiade Sains Komputer bidang komputer tahun 2011. Silakan menyantap soal-soal pemrograman
						yang telah kami racik disini.
					</li>
					<li>
						<h1>TOKI Open Contest Agustus 2011</h1>
						Bulan Agustus ini akan diadakan TOKI Open Contest. Persiapkan dirimu sebaik-baiknya dan jadilah yang terbaik!
					</li>
					<li>
						<h1>Penggunaan Bahasa JAVA</h1>
						Kabar gembira buat kamu pengguna bahasa JAVA! TOKI Learning Center sekarang menerima submisi bahasa JAVA. Silakan langsung
						mengunggah solusi soal dengan bahasa JAVA untuk mencoba fitur baru ini.
					</li>
				</ul>
			</div>
		</div>
		<div id="bg_login">
				<h3>Silakan Login</h3>
				<p><input type="text" id="input_username" name="username" value="Nama Pengguna" size="35" onfocus="clearText('input_username')" /></p>
				<p><input type="password" id="input_password" name="password" value="Sandi" size="35" onfocus="clearText('input_password')" /></p>
				<p>
					<input type="checkbox" name="remember" value="ingat" />ingat saya
					<a href="#">Lupa sandi?</a>
					<button class="btn_login" type="button" onclick="validate()">Masuk</button>
				</p>
				<p>Belum punya akun? <a href="#">Daftar disini</a></p>
		</div>
		<div id="latest">
			<div id="blogpost">
				<h2>BLOGPOST</h2>
				<div id="new_post">
					<div class="blue_header"><a href="#">JAVA Programming Contest: 2<sup>nd</sup> wave</a></div>
					<div class="dates">Posted on Tuesday, July 8th 2011</div>
					<img src="images/biner.gif" />
					<div class="post">
						TOKI Open Contest March 2011 akan diadakan pada Sabtu 26 Maret 2011 pukul 19.00 s.d. 22.00 WIB. Pendaftaran dapat dilakukan di link berikut http://tokilearning.org/contest/47/contest/register
						Peraturan masih sama dengan peraturan bulan lalu <span class="red_links"><a href="#">read more >></a></span>
					</div>
				</div>
				<br />
				<div id="older_post">
					<ul>
						<li>
							<div class="blue_header"><a href="#">Powershell Introduction Class</a></div>
							<div class="dates">Posted on Tuesday, July 8th 2011</div>
						</li>
						<li>
							<div class="blue_header"><a href="#">Ruby on Rail Quiz. Crack this if you dare!</a></div>
							<div class="dates">Posted on Tuesday, July 8th 2011</div>
						</li>
						<li>
							<div class="blue_header"><a href="#">jQuery Mobile for Smartphone Game</a></div>
							<div class="dates">Posted on Tuesday, July 8th 2011</div>
						</li>
					</ul>
					<p><div class="red_links"><a href="#">read all post >></a></div></p>
				</div>
			</div>
			<div id="activity">
				<h2>LATEST ACTIVITY</h2>
				<div id="petra_banyak">
					<ul>
						<li>
							<img src="images/petra.jpg" class="petra_pic"/>
							<span class="blue_text"><a href="#">petra</a></span> got <span class="blue_text">89</span> points on <span class="blue_text"><a href="#">Jumlahan Problem</a></span>
							<br /><span class="minutes">3 minutes ago</span>
						</li>
						<li>
							<img src="images/petra.jpg" class="petra_pic" />
							<span class="blue_text"><a href="#">petra</a></span> got <span class="blue_text">89</span> points on <span class="blue_text"><a href="#">Jumlahan Problem</a></span>
							<br /><span class="minutes">3 minutes ago</span>
						</li>
						<li>
							<img src="images/petra.jpg" class="petra_pic" />
							<span class="blue_text"><a href="#">petra</a></span> got <span class="blue_text">89</span> points on <span class="blue_text"><a href="#">Jumlahan Problem</a></span>
							<br /><span class="minutes">3 minutes ago</span>
						</li>
						<li>
							<img src="images/petra.jpg" class="petra_pic" />
							<span class="blue_text"><a href="#">petra</a></span> got <span class="blue_text">89</span> points on <span class="blue_text"><a href="#">Jumlahan Problem</a></span>
							<br /><span class="minutes">3 minutes ago</span>
						</li>
						<li>
							<img src="images/petra.jpg" class="petra_pic" />
							<span class="blue_text"><a href="#">petra</a></span> got <span class="blue_text">89</span> points on <span class="blue_text"><a href="#">Jumlahan Problem</a></span>
							<br /><span class="minutes">3 minutes ago</span>
						</li>
					</ul>
				</div>
					<div class="red_links"><a href="#">view more >></a></div>
			</div>
			<div id="top_users_and_problems">
				<div id="top_users">
					<h2 class="shift_right">TOP 5 USERS</h2>
					<ul class="shift_right">
						<li>
							<img src="images/petra.jpg" />
							<br /><a href="#">petra</a>
							<br /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/greystar.png" />
						</li>
						<li>
							<img src="images/petra.jpg" />
							<br /><a href="#">petra</a>
							<br /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/greystar.png" />
						</li>
						<li>
							<img src="images/petra.jpg" />
							<br /><a href="#">petra</a>
							<br /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/greystar.png" />
						</li>
						<li>
							<img src="images/petra.jpg" />
							<br /><a href="#">petra</a>
							<br /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/greystar.png" />
						</li>
						<li>
							<img src="images/petra.jpg" />
							<br /><a href="#">petra</a>
							<br /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/greystar.png" />
						</li>
					</ul>
					<div class="red_links shift_right"><br /><a href="#">view more ranklist >></a></div>
				</div><!-- end topusers-->
				<div id="top_problems">
					<span class="shift_right">
					<h2>TOP PROBLEMS</h2>
					<div id="problems_name">
						<ul class="shift_right">
							<li><div class="blue_text"><a href="#">Perubahan minimal</a></div></li>
							<li><div class="blue_text"><a href="#">Angka 2</a></div></li>
							<li><div class="blue_text"><a href="#">Fungsi Pak Gaus</a></div></li>
							<li><div class="blue_text"><a href="#">Rolling Ball</a></div></li>
							<li><div class="blue_text"><a href="#">General Election</a></div></li>
						</ul>
					</div> <!-- end namasoal -->
					<div id="problems_stars">
						<ul>
							<li><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/greystar.png" /></li>
							<li><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/greystar.png" /></li>
							<li><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/greystar.png" /></li>
							<li><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/greystar.png" /></li>
							<li><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/yellowstar.png" /><img src="images/greystar.png" /></li>
						</ul>
					</div> <!-- end bintang -->
					<div class="red_links"><br /><a href="problem.html">view problems >></a></div>
					</span>
				</div><!-- end topproblems-->
			</div>
		</div>
	</div>
	<div id="footer">
		<div id="footer_links">
			<ul>
				<li class="first"><a href="#">Our Blog</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
				<li>Follow our <a href ="#" class="biru">Facebook</a> and <a href="#" class="biru">Twitter</a></li>	
			</ul>
		</div>
		<div id="copyright">
			Copyright of TOKI Learning 2011
		</div>
	</div>
</body>
</html>
